<template>
  <div class="activateCard">
    <van-nav-bar
      title="卡片激活"
      v-if="showList == '1'"
    />
    <van-nav-bar
          title="卡片激活"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
          v-if="showList == '3' || showList == '2'"
    />
    <div class="content-box" v-if="showList == '1'">
      <div class="content">
        <div class="content-card" v-for="(it, index) in cardList" :key="index">
          <div style="width: 50%">
            <img :src="it.imgUrl" alt="" class="top-img" />
          </div>
          <div style="width: 50%; text-align: left">
            <div class="title">{{ it.name }}</div>
            <div class="content-right">{{ it.cardId }}</div>
            <div class="activate" @click="isShowList(it)">立即激活</div>
          </div>
        </div>
      </div>
    </div>
    <div class="content-box" v-if="showList == '2'">
      <div class="content">
        <div class="content-card">
          <div>信用卡卡号</div>
          <div>{{ cardId }}</div>
        </div>
        <div class="content-card">
          <div>手机号码</div>
          <div>{{ phoneNumber }}</div>
        </div>
        <div class="content-card-msg">
          <div>短信验证码</div>
          <div class="msgcode">
            <input
              type="text"
              placeholder="请输入验证码"
              maxlength="6"
              v-model="msgNumber"
            />
          </div>
          <div class="msg" @click="getMsg">{{ butName }}</div>
        </div>
      </div>
      <div class="bottom-box">
        <div class="bottom" @click="submit">确认激活</div>
      </div>
    </div>
    <div class="content-box" v-if="showList == '3'">
      <div class="content">
        <van-icon name="checked" size="40" color="#1989fa" />
        <div class="result">激活成功</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "activateCard",
  components: {},
  data() {
    return {
      cardList: [
        {
          imgUrl:
            "https://cdn.nbcb.com.cn/creditcard/cbp/formatimage/266559000a243c66d-bbb6-4081-a331-bfcc0ab8c0af.jpg",
          name: "腾讯白金卡(1102)",
          cardId: "55956*** ***7625",
          phoneNumber: "18569354658",
        },
        {
          imgUrl:
            "https://cdn.nbcb.com.cn/creditcard/cbp/formatimage/996890006a338cb3-fa8f-4112-a169-5eb6cd5654e7.jpg",
          name: "乐享卡(1155)",
          cardId: "9956*** ***7625",
          phoneNumber: "18569354658",
        },
      ],
      showList: "1",
      cardId: "",
      phoneNumber: "",
      number: 60,
      butName: "获取验证码",
      msgNumber: "",
      smgCodeReg: /^\d{6}$/,
    };
  },
  methods: {
    onClickLeft() {
      // window.history.go(-1);
      this.showList = "1";
    },
    //惦记激活
    isShowList(v) {
      this.showList = "2";
      this.cardId = v.cardId;
      this.phoneNumber = v.phoneNumber;
    },
    //获取验证码
    getMsg() {
      let interval = null;
      interval = setInterval(() => {
        this.number--;
        this.butName = +this.number + "s";
        if (this.number <= 0) {
          clearInterval(interval),
            (this.butName = "获取验证码"),
            (this.number = 60);
        }
      }, 1000);
    },
    //提交
    submit() {
      if (!this.msgNumber) {
        Toast({
          message: "请先获取短信验证码",
        });
        return;
      }
      if (!this.smgCodeReg.test(this.msgNumber)) {
        Toast({
          message: "短信验证码格式不对",
        });
        return;
      }
      this.showList = "3";
    },
  },
};
</script>

<style scoped>
.content-box {
  padding-top: 15px;
  background: #eee;
  height: 600px;
}
.content {
  width: 94%;
  margin: 0 auto;
  background: white;
  text-align: center;
  border-radius: 5px;
  padding: 30px 0;
}
.content-card {
  padding: 10px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}
.top-img {
  width: 100%;
  height: 100px;
}
.title {
  margin-left: 10px;
}
.content-right {
  margin-left: 10px;
}
.activate {
  background: orange;
  color: white;
  border-radius: 25px;
  text-align: center;
  margin-top: 20%;
  padding: 5px;
  margin-left: 50%;
}
/*  */
.bottom-box {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  height: 80px;
}
.content-card-msg {
  display: flex;
  font-size: 14px;
  padding: 10px;
  height: 30px;
  line-height: 30px;
  justify-content: space-between;
  position: relative;
}
input {
  border: none;
  width: 93px;
}
.msg {
  border-radius: 25px;
  border: 1px solid orange;
  padding: 0 6px;
  color: orange;
  min-width: 70px;
}
.bottom {
  width: 90%;
  background-color: orange;
  color: white;
  font-size: 20px;
  margin: 0 auto;
  height: 60px;
  line-height: 60px;
  border-radius: 25px;
}

.result {
  font-size: 16px;
  padding-bottom: 40px;
}
.msgcode{
  position: absolute;
  top: 9px;
  right: 95px;
}

</style>
